<template>
  <div class="home">
    <div class="header">
      <div class="header-back" @click="fun()"></div>
      <span class="title">
        <i class="iconfont icon-return"></i>
      </span>
      <div class="search_box">
        <span class="station">上海站</span>
        <div class="search_text">
          <span>
            <img src="search.jpg" alt="" />
            想去哪儿</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$roter.go(-1);
    },
  },
};
</script>

<style scoped>
.home {
  background: url(https://dimg04.c-ctrip.com/images/0300m120008a2c9v9488D.jpg);
  height: 1.42rem;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.header {
  height: 44px;
  text-align: center;
  display: flex;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
.header-back {
  margin-top: 0.1rem;
  margin-left: 0.12rem;
  background: url(https://pages.c-ctrip.com/you/livestream/tripshoot_forward%20_black@3x.png)
    no-repeat 50%;
  background-size: 0.24rem;
  width: 0.24rem;
  height: 0.24rem;
}
.search_box {
  height: 0.32rem;
  font-size: 14px;
  display: flex;
  width: 3rem;
  background-color: #fff;
  line-height: 0.32rem;
  position: relative;
  top: 6px;
  border-radius: 20px;
}
.title {
  height: 44px;
  float: left;
  padding: 0 8px 0 12px;
  color: #fff;
  font-size: 0.22rem;
}
.search_box img{
  vertical-align: middle;
  width: .2rem;
  height: .2rem;
}
.station {
  margin-left: 0.1rem;
  color: #0086f6;
  position: relative;
}
.search_text {
  margin-left: 0.1rem;
  color: #999;
}
.search_text .iconfont {
  margin-right: 0.05rem;
}
</style>